<template>
  <div>
    <div class="forum_cover cover">
      <!-- <h2 class="nav_title">论坛</h2> -->
      <div class="ganyan">
        <p>
          明天，这是个美丽灿烂、辉映着五光十色的迷人的字眼。愿你的明天无限美丽、无限灿烂、无限迷人!
        </p>
        <p>
          毕业了，让我们挥手再见，说一声珍重，道一声祝福，感谢彼此曾经的美好回忆，珍藏彼此真挚的友情，愿你前程似锦！
        </p>
        <p>
          曾经你我共沐一片阳光，谱写下友谊的篇章，多少回忆美在了心房。毕业分别了，愿我千万个祝福，时刻陪伴你左右。
        </p>
        <p>
          在桃李芬芳的七月，收获你灿烂的笑容。伴着夏天的激情，带去我温馨的问候，祝你毕业大吉，早日找到理想的工作！
        </p>
      </div>

      <div class="newcom">
        <img :src="`${$store.state.baseurl}${$store.state.userdata.headerUrl}`" alt="头像" />
        <textarea
          v-model.trim="comment_content"
          name=""
          id=""
          cols="30"
          rows="10"
        ></textarea>

        <p class="button1" @click="putOneComment">发表<br />评论</p>
      </div>

      <div class="cover_title">
        <p class="allcom">
          评价共计( <strong>{{ count }}</strong> )条
        </p>

        <el-select
          class="elselect"
          v-model="ishot"
          @change="handleHot"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="item" v-for="item in allcomments" :key="item._id">
        <div class="left">
          <img :src="`${$store.state.baseurl}${item.push_user_id.headerUrl}`" alt="头像" />
          <span> {{ item.push_user_id.username }} </span>
          <span v-if="item.er_arr.length != 0">
            回复数 [<strong>{{ item.er_arr.length }}</strong
            >]
          </span>
        </div>
        <div class="right">
          <p class="star">
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
          </p>
          <p class="louzhu">{{ item.comment_content }}</p>

          <p class="huifu">
            <span class="push_time">
              {{ item.push_time | dataFormat() }}
            </span>
            <i
              @click="
                setComment(
                  item.up_number.indexOf($store.state.userdata._id),
                  1,
                  item
                )
              "
              :class="[
                'iconfont',
                'icon-zan',
                item.up_number.indexOf($store.state.userdata._id) != -1
                  ? 'active'
                  : '',
              ]"
              >赞({{ item.up_number.length }})</i
            >
            <i
              @click="
                setComment(
                  item.lower_number.indexOf($store.state.userdata._id),
                  2,
                  item
                )
              "
              :class="[
                'iconfont',
                'icon-cai',
                item.lower_number.indexOf($store.state.userdata._id) != -1
                  ? 'active'
                  : '',
              ]"
              >踩({{ item.lower_number.length }})</i
            >

            <i
              @click="isShOWInput(item._id)"
              class="iconfont icon-huifu"
              v-if="item.push_user_id._id != $store.state.userdata._id"
              ><span class="pos_huifu">回复</span></i
            >
            <i
              @click="handleDelComent(item)"
              class="iconfont icon-chehuisekuai"
              v-if="item.push_user_id._id == $store.state.userdata._id || $store.state.userdata.shengfen==2"
              >撤回</i
            >
          </p>

          <div class="newcom" v-if="showVal == item._id">
            <img :src="`${$store.state.baseurl}${item.push_user_id.headerUrl}`" alt="头像" />
            <textarea
              v-model.trim="comment_content1"
              :placeholder="`回复 @${item.push_user_id.username}`"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>

            <p class="button1" @click="handleReply(item)">发表<br />评论</p>
          </div>

          <ul v-if="item.er_arr.length != 0">
            <li v-for="item1 in item.er_arr" :key="item1._id">
              <p class="li-headere">
                <img
                  :src="`${$store.state.baseurl}${item1.push_user_id.headerUrl}`"
                  alt="头像"
                />
                {{ item1.push_user_id.username }} 回复
                {{ item1.push_usered_id.username }}：
              </p>
              <p class="li_content">
                {{ item1.comment_content }}
              </p>
              <p class="huifu">
                <span class="push_time">
                  {{ item1.push_time | dataFormat() }}
                </span>

                <i
                  @click="
                    setComment(
                      item1.up_number.indexOf($store.state.userdata._id),
                      1,
                      item1,
                      item1._id
                    )
                  "
                  :class="[
                    'push_time',
                    'iconfont',
                    'icon-zan',
                    item1.up_number.indexOf($store.state.userdata._id) != -1
                      ? 'active'
                      : '',
                  ]"
                  >赞({{ item1.up_number.length }})</i
                >
                <i
                  @click="
                    setComment(
                      item1.lower_number.indexOf($store.state.userdata._id),
                      2,
                      item1
                    )
                  "
                  :class="[
                    'iconfont',
                    'icon-cai',
                    item1.lower_number.indexOf($store.state.userdata._id) != -1
                      ? 'active'
                      : '',
                  ]"
                  >踩({{ item1.lower_number.length }})</i
                >
                <i
                  class="iconfont icon-huifu"
                  v-if="item1.push_user_id._id != $store.state.userdata._id"
                  @click="isShOWInput(item1._id)"
                  ><span class="pos_huifu">回复</span></i
                >
                <i
                  @click="handleDelComent(item1)"
                  class="iconfont icon-chehuisekuai"
                   v-if="item.push_user_id._id == $store.state.userdata._id || $store.state.userdata.shengfen==2"
                  >撤回</i
                >
              </p>
              <div class="newcom" v-if="showVal == item1._id">
                <img
                  :src="`${$store.state.baseurl}${item1.push_user_id.headerUrl}`"
                  alt="头像"
                />
                <textarea
                  v-model.trim="comment_content1"
                  :placeholder="`回复 @${item1.push_user_id.username}`"
                  name=""
                  id=""
                  cols="30"
                  rows="10"
                ></textarea>

                <p class="button1" @click="handleReply1(item1)">
                  发表<br />评论
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    

    <div class="more" v-if="allcomments.length > 0">
      <el-button type="primary" @click="handleMore" v-if="count > count1"
        >加载更多</el-button
      >
      <el-button type="info" v-else>加载到底了</el-button>
    </div>

    <div class="more" v-else>
      <P> 还没有评论，快来发表你的评论吧 </P>
    </div>
  </div>
</template>

<script>
import { moment } from "../../../tool";
import { getallcomments, sendComent, handlePl, delComment } from "@/api/data";
export default {
  data() {
    return {
      showVal: "", // 用于控制回复框的显示
      options: [
        {
          value: "false",
          label: "时间",
        },
        {
          value: "true",
          label: "热度",
        },
      ],
      allcomments: [], // 评论列表
      count: 0, // 总条数
      comment_content: "", // 新评论的内容
      comment_content1: "", // 所有回复评论的内容
      isOne: true,
      ishot: "false", // 默认按照时间排序
      userdata: null,
      num: 1, // 当前是多少页评论
      count1: 0, // 当前共计返回了多少条数据
    };
  },
  mounted() {
    this.getALLComments();
    this.userdata = this.$store.state.userdata;
  },
  methods: {
    // 获取更多评论
    async handleMore() {
      this.num += 1;
      let data = await getallcomments({
        ishot: this.ishot,
        num: this.num,
      });

      if (data.code == 200) {
        // 计算出当前共有多少评论 (楼主评论加子评论)
        let count1 = data.data.length;
        for (let i = 0; i < data.data.length; i++) {
          count1 += data.data[i].er_arr.length;
        }
        this.count1 = count1;
        this.count = data.count;
        this.allcomments = data.data;
        this.comment_content = "";
      }
    },
    // 撤销评论
    async handleDelComent(item) {
      let { _id } = item;
      let data = await delComment({
        comment_id: _id,
        user_id: this.userdata._id,
        isOne: item.isOne,
      });
      if (data.code == 200) {
        this.getALLComments();
      } else {
        this.$message.error(data.msg);
      }
    },

    // 赞
    async setComment(iszan, index, item) {
      // iszan(-1 表示中立 ||  其他 表示原来有选)
      // index(1赞 || 2踩)
      if (iszan == -1) {
        // 原来是中立
        if (index == 1) {
          // 提交点赞
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: this.userdata._id,
            isZan: 1,
          });
          // console.log(data1.msg);
        } else if (index == 2) {
          // 提交踩
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: this.userdata._id,
            isZan: 2,
          });
          // console.log(data1.msg);
        }
      } else {
        // 原来是赞/踩
        if (index == 1) {
          // 取消赞
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: this.userdata._id,
            isZan: 0,
          });
          // console.log(data1.msg);
        } else if (index == 2) {
          // 取消踩
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: this.userdata._id,
            isZan: 0,
          });
        }
      }

      this.getALLComments();
    },

    // 用于控制各个回复框的正确显示
    isShOWInput(id) {
      this.showVal = id;
    },

    // 回复楼主的评论
    async handleReply(item) {
      if (this.comment_content1.length == 0) {
        return this.$message.error("评论内容不能为空");
      }
      let data = await sendComent({
        isOne: false,
        comment_content: this.comment_content1,
        push_user_id: this.userdata._id,
        comment_id: item._id,
        push_usered_id: item.push_user_id._id,
        zhu_id: item._id,
      });
      if (data.code == 200) {
        this.getALLComments();
        (this.comment_content1 = ""), (this.showVal = "");
      } else {
        this.$message.error(data.msg);
      }
    },

    // 回复非楼主的评论
    async handleReply1(item) {
      if (this.comment_content1.length == 0) {
        return this.$message.error("评论内容不能为空");
      }
      let data = await sendComent({
        isOne: false,
        comment_content: this.comment_content1,
        push_user_id: this.userdata._id,
        comment_id: item._id,
        push_usered_id: item.push_user_id._id,
        zhu_id: item.zhu_id,
      });
      if (data.code == 200) {
        this.getALLComments();
        this.showVal = "";
        this.comment_content1 = "";
      } else {
        this.$message.error(data.msg);
      }
    },

    // 改变排序方式
    handleHot() {
      this.num = 1;
      this.getALLComments();
    },

    // 提交评论
    async putOneComment() {
      // push_user_id, comment_content, isOne
      if (this.comment_content.length == 0) {
        return this.$message.error("请输入具体的评论内容");
      }
      let data = await sendComent({
        push_user_id: this.$store.state.userdata._id,
        comment_content: this.comment_content,
        isOne: true, // 表示这是楼主发评论
      });

      if (data.code == 200) {
        this.getALLComments();
      } else {
        this.$message.error(data.msg);
      }
    },

    // 获取这本书的基本评论
    async getALLComments() {
      let data = await getallcomments({
        ishot: this.ishot,
        num: this.num,
      });

      if (data.code == 200) {
        // 计算出当前共有多少评论 (楼主评论加子评论)
        let count1 = data.data.length;
        for (let i = 0; i < data.data.length; i++) {
          count1 += data.data[i].er_arr.length;
        }
        this.count1 = count1;
        this.count = data.count;
        this.allcomments = data.data;
        this.comment_content = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$Color: #00a1d6;
.forum_cover {
  padding: 20px;
}
p {
  color: #555;
}
span {
  color: #555;
}
.cover {
  margin-top: 20px;
  border: 3px solid #c3dfea;
  padding: 15px;
  padding-top: 0px;
  h3 {
    text-align: center;
    height: 70px;
    line-height: 70px;
    color: #333;
    border-bottom: 1px dashed #369;
  }
  .newcom {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .rowtext {
      width: 450px;
      height: 65px;
      background-color: #f4f5f7 !important;
    }
    textarea {
      margin-left: 20px;
      outline: none;
      font-size: 14px;
      display: inline-block;
      box-sizing: border-box;
      background-color: #f4f5f7;
      border: 1px solid #e5e9ef;
      overflow: auto;
      border-radius: 4px;
      color: #333;
      width: 600px !important;
      height: 65px;
      transition: 0s;
      padding: 5px 10px;
      line-height: normal;
      &:focus {
        border: 1px solid $Color;
        background-color: #fff;
      }
    }

    .button1 {
      padding: 0 20px;
      height: 65px;
      cursor: pointer;
      margin-left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #00a1d6;
      border-radius: 5px;
      color: #f5f5f5;
    }
  }

  .cover_title {
    border-top: 1px solid #ccc;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    p.allcom {
      font-size: 14px;
      color: #555;
    }

    select {
      color: #666;
      font-size: 14px;
      option {
        color: #666;
      }
    }
  }

  .item {
    padding: 15px;
    background-color: #fff;
    margin-top: 20px;
    display: flex;
    border-bottom: 1px solid #999;
    &:nth-last-of-type(1) {
      border-bottom: none;
    }
    .left {
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 102px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      span {
        white-space: nowrap;
        margin-top: 10px;
      }
    }

    .right {
      padding-left: 15px;
      width: 100%;
      p.star {
        height: 30px;
        i.iconfont {
        }
      }

      p.louzhu {
        line-height: 30px;
        font-size: 16px;
        color: #555;
      }

      p.huifu {
        margin-top: 0px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        font-size: 14px;
        i {
          margin-right: 20px;
          font-size: 14px;
        }
        span {
          margin-right: 20px;
          font-size: 14px;
          color: #555;
        }

        i.iconfont {
        }
      }

      ul {
        margin-top: 20px;
        border-top: 2px solid #ccc;
        li {
          padding: 15px 0;
          border-bottom: 1px solid #ccc;
          &:nth-last-of-type(1) {
            border-bottom: none !important;
          }
          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 10px;
          }
          p {
            line-height: 30px;
          }
          p.li-headere {
            font-size: 14px;
            color: #666;
            display: flex;
            align-items: center;
          }

          p.li_content {
            color: #555;
          }

          p.li_time {
          }

          p.huifu {
            i {
            }
          }
        }
      }
    }
  }
}

.active {
  color: #369 !important;
}
i {
  cursor: pointer;
  color: #666;
}

.push_time {
  color: #666;
}
.ganyan {
  box-shadow: 0 0 10px #999;
  padding: 15px;
  p {
    font-size: 16px;
    color: #555;
    text-indent: 32px;
    line-height: 30px;
  }
}

.elselect {
  width: 100px;
}

.nav_title {
  font-size: 28px;
  text-shadow: 0 0 5px #ccc;
}
.pos_huifu {
  position: relative;
  top: -1px;
  left: 1px;
}

.more {
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>